<style lang="less">
/* 参考地址： https://www.cnblogs.com/daxiong182/p/16036345.html */
@import '../common/less/varible.less';
.lyric {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.swiper {
    overflow: hidden;
    text-align: center;
    height: 100%;
}

.swiper-slide {
    height: 100%;
    position: relative;
}

.bg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 10;
    background-size: cover;
    // 设置背景变模糊
    filter: blur(50px);
}

.content {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;

    .img-box {
        width: 200px;
        height: 200px;
        border-radius: 10px;
        overflow: hidden;
        margin: 70px auto 0;

        img {
            width: 100%;
            border-radius: 10px;
            vertical-align: middle;
        }
    }

    .lyric-box {
        margin: 15px auto 0;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 16px;
        width: 100%;
        height: 200px;
        // background-color: green;
        overflow: hidden;

        ul {
            transition: all .5s;
            // 设置歌词滚动 （通过位移属性）
            transform: translateY(0px);

            li {
                padding: 5px 0;
                text-align: center;
                // 过渡属性
                transition: all .5s;
                color: #fff;
            }

            .active {
                color: @activeColor;
                font-size: 20px;
            }
        }
    }
}
.song-name {
    color: #fff;
    margin-top: 15px;
}
</style>

<template>
    <!-- 子组件 -->
    <div class="lyric">
        <div v-if="arr.length == 0">
            <p style="padding: 50px 0; text-align: center; color: #ccc;">暂无歌曲列表~~</p>
        </div>
        <div class="swiper">
            <div class="swiper-wrapper">
                <!-- 列表渲染 -->
                <div v-for="item in arr" :key="item.id" class="swiper-slide">
                    <!-- 背景图 -->
                    <div class="bg" :style="`background-image:url(${item.picUrl});`"></div>
                    <!-- 承载每一首歌的盒子 -->
                    <!-- <p>{{ current+1 }} / {{ total }}</p> -->
                    <div class="content">
                        <!-- 封面图 -->
                        <div class="img-box">
                            <img :src="item.picUrl" :alt="item.picUrl">
                        </div>
                        <p class="song-name">{{ item.name }}</p>
                        <!-- 歌词 -->
                        <p v-if="lyricArray.length == 0" style="text-align: center; color: #ccc;"> 正在搜索歌词.. </p>
                        <div v-else class="lyric-box">
                            <ul :style="`margin-top: 20px; transform: translateY(-${lyricIndex * 30}px)`">;
                                <li 
                                v-for="(opt, i) in lyricArray" 
                                :class="i == lyricIndex ? 'active' : ''" 
                                :key="opt.id">
                                {{ opt.text }}</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
// 获取本地存储的数据
let sky_songstr = localStorage.getItem("SKY_SONGS");
let arr = [];
// 判断是否为null
if (sky_songstr) {
    // 把json字符串转成数组
    arr = JSON.parse(sky_songstr);
}


//导入Swiper函数
import Swiper from 'swiper'
// 歌曲信息列表组件（采用轮播图）
export default {
    // 设置组件名称
    name: 'song-list',
    // 子组件自定义属性接收父组件的数据
    // props: ['num', 'lyricArray'],
    props: {
        num: {type: [String, Number]}, 
        time: {type: [String, Number]}, 
        lyricArray: {type: Array}
    },
    // 设置数据
    data() {
        return {
            // 索引值
            current: 0,
            // 数组
            arr: [],
            // 总数
            total: 10,
            // id 歌曲id
            id: '',
            // 歌词索引值
            lyricIndex: 0
        }
    },
    // 挂载后钩子函数中操作swiper
    mounted() {
        // DOM更新结束后 在初始化swiper
        this.$nextTick(() => {
            // 初始化轮播图
            this.initSwiper();
        })
    },
    // 程序创建了 （打开页面就执行的函数）
    created(){
        // 记录所有歌曲
        this.arr = arr;
        this.total = arr.length;
    },
    // 编写方法
    methods: {
        // 创建Swiper实例
        initSwiper() {
            // 记录当前函数作用域的this (vue组件实例)
            let that = this;
            // 创建swiper实例
            // 把swiper实例挂在组件实例上
            this.$swiper = new Swiper('.swiper', {
                // direction: 'vertical', // 垂直切换选项
                // loop: true, // 循环模式选项 (无缝衔接)
                autoplay: true,
                // 设置分页器
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
                // 设置前进后退按钮
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                // swiper交互行为
                on: {
                    // 当移动端手指触摸滑动切换歌曲就触发这个行为
                    slideChange() {
                        // console.log('索引值:' + this.activeIndex);
                        let index = this.activeIndex;
                        // console.log(this);// swiper实例
                        // console.log(that);// 组件实例
                        if (that.current != index) {
                            // console.log({index})
                            // 切换歌曲 （切歌）
                            that.current = index;
                            // console.log("检查触摸滑动是否有切换索引:",index);
                            // 把索引值传值给父组件
                            that.$emit('send-index', index);

                            // 根据索引值找对应的歌曲id
                            if(arr[index]) {
                                that.id = arr[index].id;
                                // 发送id给父组件
                                that.$emit('send-id', that.id);
                            }
                        }
                    },
                },
            })
        },
    },
    // 侦听器
    watch: {
        // 观察arr的索引值变化
        num: {
            // 立即执行
            immediate: true,
            // 函数
            handler(index) {
                // console.log("检查代码是否执行到此处", index);
                this.current = index;
                // 切换歌曲
                setTimeout(() => {
                    this.$swiper.slideTo(index);
                }, 100)
            }
        },
        // 观察时间的变化
        time(value){
            // console.log("当前播放时长:",value);//时间
            // 每一行歌词的时间已经整合在对象中
            // 想办法计算出每一行歌词对应的索引值
            let index = 0;
            // 循环数组
            for(let i = 0 ; i < this.lyricArray.length - 1 ; i ++){
                // console.log(this.lyricArray[i-1].time)
                // 判断当前这行歌词的索引值
                if(value >= this.lyricArray[i].time && value <= this.lyricArray[i + 1].time) {
                    index = i;
                    break;
                }
            }
            // console.log({index,value});
            // 给歌词索引赋值
            this.lyricIndex = index;
        }
    }
}
</script>
